<template>
  <div class="testHome">
    <swiper-view></swiper-view>
  </div>
  <!-- 图表部分 -->
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content ep-bg-purple">
          <div class="linebox">
            <!-- 任务燃尽图 -->
            <div id="main4" style="width: 100%; height: 330px;margin-top: 10px;"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, resolveDirective } from "vue"
import SwiperView from '@/components/SwiperView.vue'
import * as echarts from 'echarts';

onMounted(async() => {
  var chartDom = document.getElementById('main4');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: '任务燃尽图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['项目', 'bug']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10.1', '10.2', '10.3', '10.4', '10.5', '10.6', '10.7']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '项目',
        type: 'line',
        // stack: 'Total',
        itemStyle: { color: "#ff4500" },
        data: [6, 5, 7, 4, 9, 4, 8]
      },
      {
        name: 'bug',
        type: 'line',
        // stack: 'Total',
        data: [1, 1, 5, 4, 3, 1, 4]
      }

    ]
  };

  option && myChart.setOption(option);
})

</script>

<style scoped>
.testHome {
  width: 100%;
  overflow: hidden;
}
.bugbox {
  width: 100%;
  height: 100%;
  text-align: center;
}

.bugbox .lbox {
  width: 40%;
  height: 340px;
  float: left;
  padding-top: 120px;
  box-sizing: border-box;
}

.bugbox .lbox h2 {
  color: green;
}

.bugbox .rbox {
  width: 60%;
  height: 340px;
  float: left;
}

.bugbox .rbox .rlbox {
  width: 40%;
  height: 340px;
  float: left;
}

.bugbox .rbox .rlbox div {
  box-sizing: border-box;
  padding-top: 40px;
  height: 180px;
}

.bugbox .rbox .rlbox div:first-child h2 {
  color: green;
}

.bugbox .rbox .rlbox div:last-child h2 {
  color: orange;
}


.bugbox .rbox .rrbox {
  width: 60%;
  height: 340px;
  float: left;
}
</style>
